/* 报告页 */
.el-breadcrumb {
  font-size: 15px;
  line-height: 2;
}

.container {
  padding-bottom: 60px;
  width: 1000px;
  margin: 80px auto;
  .testProbably {
    // width: 1200px;
    width: 1000px;
    // height: 370px;
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
    border-radius: 5px;
    margin: 10px auto;
    padding: 15px 10px;
    .tit {
      font-size: 20px;
      letter-spacing: 2px;
      color: $color-black;
      text-align: center;
      font-weight: 550;
      margin-bottom: 30px;
    }
    .progressMain {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .testCorrect {
        .progressBox {
          // width: 169px;
          // height: 169px;
          width: 130px;
          height: 130px;
          position: relative;
          .progressText {
            width: fit-content;
            height: fit-content;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            p {
              font-size: 16px;
              color: $color-black;
              letter-spacing: 1px;
            }
            h5 {
              font-size: 16px;
              color: $color-black;
              font-weight: 550;
              letter-spacing: 2px;
            }
          }
        }
        .progressIntd {
          font-size: 14px;
          color: $color-black;
          margin-top: 24px;
          span {
            // color: $color-green;
            color: $color-black;
          }
        }
        .progressIns {
          width: 170px;
          margin: 32px auto 0;
          display: flex;
          justify-content: space-between;
          p {
            font-size: 14px;
            color: $color-black;
            position: relative;
            text-indent: 20px;
            &::after {
              content: '';
              width: 14px;
              height: 14px;
              background: $color-green;
              position: absolute;
              top: 3px;
              left: 0;
            }
            &:last-child {
              &::after {
                background: #ddf3e8;
              }
            }
          }
        }
      }
      .probablyInfo {
        width: 861px;
        // height: 208px;
        box-sizing: border-box;
        background-color: #fafafa;
        border-radius: 10px;
        // padding: 66px 60px;
        padding: 10px 60px;
        float: right;
        display: flex;
        justify-content: space-between;
        .item {
          width: 107px;
          text-align: center;
          position: relative;
          &::after {
            content: '';
            width: 1px;
            height: 66px;
            background: #eee;
            position: absolute;
            top: 8px;
            left: auto;
            right: -49px;
          }
          &:last-child {
            &::after {
              width: 0;
            }
          }
          p {
            font-size: $size-common;
            color: #999;
            span {
              font-size: 36px;
              font-weight: 550;
              margin-right: 5px;
            }
            &:last-child {
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  .answerIntd {
    // width: 1200px;
    width: 1000px;
    background-color: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(231, 231, 231, 0.55);
    border-radius: 5px;
    margin-top: 10px;
    padding: 15px 10px 20px;
    .top {
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
      p {
        font-size: 16px;
        color: $color-black;
        margin-right: 40px;
        display: inline-block;
        cursor: pointer;
        &.act {
          color: #0193ff;
          font-weight: 550;
        }
      }
    }
    .tiList {
      margin-top: 20px;
      .testIntd {
        margin-bottom: 27px;
        p {
          font-size: 14px;
          color: $color-black;
          text-indent: 27px;
          display: inline-block;
          margin-right: 30px;
          position: relative;
          &::after {
            content: '';
            width: 18px;
            height: 18px;
            border-radius: 3px;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
          }
          &.true {
            &::after {
              background: $color-green2;
            }
          }
          &.error {
            &::after {
              background: #ff8a8d;
            }
          }
          &.nodo {
            &::after {
              background: $color-white;
              border: solid 1px #cccccc;
            }
          }
        }
      }
      .tiType {
        margin-top: 10px;
        h5 {
          font-size: 14px;
          color: $color-black;
          font-weight: 550;
          margin-bottom: 20px;
        }
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        p {
          width: 30px;
          height: 30px;
          border-radius: 5px;
          font-size: 14px;
          color: $color-white;
          text-align: center;
          line-height: 30px;
          background: $color-green2;
          box-sizing: border-box;
          margin: 0 20px 20px 0;
          &.false {
            background-color: #ff8a8d;
          }
          &.nodo {
            background: $color-white;
            border: 1px solid #ccc;
            color: #666;
          }
        }
      }
    }
    .btns {
      width: 690px;
      height: 36px;
      margin: 33px auto 0;
      text-align: center;
      button {
        width: 120px;
        height: 36px;
        border-radius: 5px;
        background: #0193ff;
        color: $color-white;
        margin-right: 70px;
        border: none;
        cursor: pointer;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
